<template>
  <div>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item :label="$t('云开关')" prop="cloudFlag">
        <el-radio-group v-model="form.cloudFlag" style="display: inline-block">
          <el-radio :label="1">{{ $t('开启') }}</el-radio>
          <el-radio :label="0">{{ $t('关闭') }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('预留库存')" prop="">
        <div class="card">
          <el-row style="margin-bottom: -20px">
            <el-form-item label-width="0" prop="stockMode" style="margin-left: 10px">
              <el-radio-group v-model="form.stockMode">
                <el-radio :label="1"> {{ $t('固定预留库存') }}</el-radio>
                <el-radio :label="2" style="margin-left: 270px">{{ $t('百分比预留库存') }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
          <el-row style="padding: 5px">
            <el-col :span="12" style="padding-right: 30px">
              <p class="adjustment">
                {{
                  $t(
                    '每次采购上架时都按固定数量预留， 预留剩下的才变成云库存展示云库存剩下的数量会先回收 再加上采购上架数量进行计算',
                  )
                }}
              </p>
            </el-col>
            <el-col :span="12">
              <p class="adjustment">
                {{
                  $t(
                    '每次采购上架时都按百分比数量预留， 预留剩下的才变成云库存展示云库存剩下的数量会先回收 再加上采购上架数量进行计算',
                  )
                }}
              </p>
            </el-col>
          </el-row>
          <!-- 固定预留库存 -->
          <el-form-item
            v-if="form.stockMode == 1"
            style="margin: 30px 0"
            label-width="105px"
            :label="$t('固定预留数量') + ':'"
            prop="cloudPrice"
          >
            <el-input-number
              style="margin-right: 10px"
              v-model="form.fixedNum"
              controls-position="right"
              :precision="0"
              :min="0"
            />
          </el-form-item>
          <!-- 百分比预留库存 -->
          <el-form-item
            v-if="form.stockMode == 2"
            style="margin: 30px 0"
            label-width="60px"
            :label="$t('百分比') + ':'"
            prop="cloudPrice"
          >
            <el-input-number
              style="margin-right: 10px"
              v-model="form.percent"
              controls-position="right"
              :precision="3"
              :min="0"
            />
          </el-form-item>
        </div>
      </el-form-item>
      <el-form-item :label="$t('综合倍率（关税+本地消费税+运费倍率）')" label-width="280px" prop="consumeRate">
        <el-input-number
          style="margin: 0 10px 0 20px"
          v-model="form.consumeRate"
          controls-position="right"
          :precision="2"
          :min="0"
        />
        <span>%</span>
      </el-form-item>
      <el-row>
        <el-col :span="9">
          <el-form-item :label="$t('关税')" prop="hsCodeRate">
            <el-input-number
              style="margin-right: 10px"
              v-model="form.hsCodeRate"
              controls-position="right"
              disabled
              :precision="2"
              :min="0"
            />
            <span>%</span>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item :label="$t('海关消费税')" prop="customsConsumeRate">
            <el-input-number
              style="margin-right: 10px"
              v-model="form.customsConsumeRate"
              controls-position="right"
              :precision="2"
              :min="0"
            />
            <span>%</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('国内发货方式')" prop="deliverWayCn">
            <el-select disabled v-model="form.deliverWayCn">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in deliver_goods_cn_list"
                :key="index"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('国内发货倍率')" prop="deliverRate">
            <div>{{ form.deliverRate }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item :label="$t('本地海关消费税')" prop="customsLocalConsumeRate">
            <el-input-number
              v-model="form.customsLocalConsumeRate"
              controls-position="right"
              :precision="2"
              :min="0"
            />
            <span>%</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="footer">
      <el-button
        v-hasPermi="['distribution:skuDistributor:updateCloudSkuDetails']"
        type="primary"
        @click="handleSubmit"
      >
        {{ $t('修改') }}
      </el-button>
      <el-button @click="close">{{ $t('关闭') }}</el-button>
    </div>
  </div>
</template>
<script>
import { getCloudSkuDetails, updateCloudSkuDetails } from '@/api/distribution/sku/skuInfo'
import { useDict } from '@/utils/useDict'

export default {
  props: {
    skuId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      /**国内发货方式 */
      deliver_goods_cn_list: [],
      backFormDate: {},
      form: {},
      rules: {
        sku: [{ required: true, message: '请输入', trigger: 'blur' }],
        skuExtra: [{ required: true, message: '请输入', trigger: 'blur' }],
        skuNameCn: [{ required: true, message: '请输入', trigger: 'blur' }],
        consumeRate: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
    }
  },
  created() {
    this.getDetail()
    useDict('deliver_goods_cn').then(({ deliver_goods_cn }) => (this.deliver_goods_cn_list = deliver_goods_cn))
  },
  methods: {
    handleSubmit() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          updateCloudSkuDetails(this.form).then((res) => {
            const { code, data, msg } = res
            if (code === 200) {
              this.$message({ type: 'success', message: msg })
              this.getDetail()
            }
          })
        }
      })
    },
    getDetail() {
      const data = {
        skuId: this.skuId,
      }
      getCloudSkuDetails(data).then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          Object.keys(data).forEach((key) => {
            this.$set(this.form, key, data[key])
          })
          this.backFormDate = JSON.parse(JSON.stringify(data))
          console.log(`this.form ==>`, JSON.parse(JSON.stringify(this.form)))
        }
      })
    },

    // 验证数据是否改变
    validFormData() {
      console.log(`2 ==>`, JSON.parse(JSON.stringify(2)))
      let flag = null
      if (JSON.stringify(this.backFormDate) == JSON.stringify(this.form)) {
        flag = false
      } else {
        flag = true
      }
      return flag
    },
    close() {
      this.$parent.$parent.cancel()
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-bottom: 16px !important;
}
::v-deep .el-radio-group {
  display: flex;
}

.size {
  width: 100%;
  text-align: center;
}

.card {
  flex: 1;
  border-radius: 2px;
  padding: 10px;
  border: solid 1px rgba(0, 0, 0, 0.1);
}

.adjustment {
  border-radius: 2px;
  padding: 4px;
  background-color: rgb(225, 234, 252);
}

.footer {
  margin-top: 10px;
  float: right;
}
</style>
